<template>
	<div class="add-rule">
		<el-card class="rule-card">
			<template #header>
				<div class="card-btn">
					<el-button @click="$router.back()">
						<el-icon><arrow-left /></el-icon>
						返回
					</el-button>
				</div>
			</template>
			<div class="rule-container">
					<div class="container-resource">
						<p class="resource-title">资源</p>
						<div class="resource-form">
							<p class="rule-detail-resource-title">服务资源类型:</p>
							<p class="rule-detail-resource-value">API</p>
							<p class="rule-detail-resource-title">服务资源名称:</p>
							<p class="rule-detail-resource-value">个人网银转账</p>
						</div>
						<div class="resource-flow">
							<p class="flow-title">流量分类标识</p>
							<div class="flow-form">
								<p class="rule-detail-flow-title">协议类型:</p>
								<p class="rule-detail-flow-value">类型1</p>
								<p class="rule-detail-flow-title">路径:</p>
								<p class="rule-detail-flow-value">/asdf/asdf</p>
								<p class="rule-detail-flow-title">精细化设置:</p>
								<p class="rule-detail-flow-value">set001</p>
								<p class="rule-detail-flow-title">请求参数:</p>
								<p class="rule-detail-flow-value">{page: 1, pageSize: 10}</p>
								<p class="rule-detail-flow-title">请求头:</p>
								<p class="rule-detail-flow-value">http/</p>
								<p class="rule-detail-flow-title">请求体:</p>
								<p class="rule-detail-flow-value">{query: {}}</p>
							</div>
						</div>
					</div>
					<div class="container-rule">
						<p class="rule-title">规则</p>
						<div class="rule-form">
							<p class="rule-detail-rule-title">规则类型:</p>
							<p class="rule-detail-rule-value-middle">熔断</p>
							<p class="rule-detail-rule-value-right">Gien滑动窗口</p>
						</div>
						<div class="rule-format">
							<p class="format-title">规则参数</p>
							<div class="format-form">
								<!-- 限流 - Sentinel线程池 -->
								<div
									style="display: flex; flex-wrap: wrap"
									v-if="ruleForm.ruleType == '1' && ['4'].includes(ruleForm.ruleTypeAlgorithm)">
									<p class="rule-detail-rule-title">线程数阈值:</p>
									<p class="rule-detail-rule-value">12</p>
								</div>

								<!-- 限流 - Gien混合令牌桶 -->
								<div
									style="display: flex; flex-wrap: wrap"
									v-if="ruleForm.ruleType == '1' && ['3'].includes(ruleForm.ruleTypeAlgorithm)">
									<p class="rule-detail-format-title">容量:</p>
									<p class="rule-detail-format-value">12</p>
									<p class="rule-detail-format-title">峰值阈值:</p>
									<p class="rule-detail-format-value">12</p>
									<p class="rule-detail-format-title">间隔周期:</p>
									<p class="rule-detail-format-value">1 秒</p>
									<p class="rule-detail-format-title">填充数:</p>
									<p class="rule-detail-format-value">12</p>
								</div>

								<!-- 限流 - Gien滑动窗口/Sentinel滑动窗口 -->
								<div
									style="display: flex; flex-wrap: wrap"
									v-if="ruleForm.ruleType == '1' && ['1', '2'].includes(ruleForm.ruleTypeAlgorithm)">
									<p class="rule-detail-format-title">窗口数:</p>
									<p class="rule-detail-format-value">12</p>
									<p class="rule-detail-format-title">采集周期:</p>
									<p class="rule-detail-format-value">1 秒</p>
									<p class="rule-detail-format-title">请求数阈值:</p>
									<p class="rule-detail-format-value">12</p>
								</div>

								<!-- 熔断 - 错误率熔断 -->
								<div
									style="display: flex; flex-wrap: wrap"
									v-if="ruleForm.ruleType == '2' && ['1', '2'].includes(ruleForm.ruleTypeAlgorithm)">
									<p class="rule-detail-format-title">阈值:</p>
									<p class="rule-detail-format-value">12</p>
									<p class="rule-detail-format-title">持续时长:</p>
									<p class="rule-detail-format-value">1 秒</p>
									<p class="rule-detail-format-title">统计时长:</p>
									<p class="rule-detail-format-value">1 毫秒</p>
									<p class="rule-detail-format-title">最小请求数:</p>
									<p class="rule-detail-format-value">12</p>
								</div>

								<!-- 通用 -->
								<div style="display: flex; flex-wrap: wrap">
									<p class="rule-detail-format-title">超限行为:</p>
									<p class="rule-detail-format-value-line">拒绝</p>
								</div>
							</div>
						</div>
					</div>
					<div class="container-time">
						<p class="time-title">时间</p>
						<div class="time-form">
							<p class="rule-detail-time-title">生效时间:</p>
							<p class="rule-detail-time-value">2022-02-08</p>
							<p class="rule-detail-time-title">失效时间:</p>
							<p class="rule-detail-time-value">2022-08-08</p>
						</div>
					</div>
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue'
	import { useRoute } from 'vue-router'

	const route = useRoute()
	const formState = ref('add')

	const formSize = ref<any>('default')
	const ruleFormRef = ref<any>()
	const ruleForm = ref<any>({
		name: '',
		region: '',
		switch: '',
		set: '',
		ruleType: '1',
		ruleTypeAlgorithm: '1',
		action: '',
	})

	const getStatus = () => {
		let state: any = route.query.state
		formState.value = state
		if (state == 'edit') {
			ruleForm.value = {
				name: '1',
				region: '1',
				switch: '1',
				set: '1',
				ruleType: '1',
				action: '1',
				ruleTypeAlgorithm: '1',
			}
		}
	}

	onMounted(() => {
		getStatus()
	})

	defineExpose({})
</script>

<style lang="scss" scoped>
	.add-rule {
		margin-bottom: 50px;
		.rule-card {
			.card-btn {
				display: flex;
				justify-content: space-between;
			}
		}
		.rule-container {
			width: 100%;
			padding: 0px 20px;
			.container-resource {
				width: 100%;
				border-bottom: 1px dashed #ccc;
				.resource-title {
					font-size: 16px;
					font-weight: 600;
				}
				.resource-form {
					display: flex;
					width: 100%;
				}
				.resource-flow {
					margin-bottom: 20px;
					padding: 20px 20px 10px 36px;
					border-radius: 6px;
					background-color: #eee;
					// padding: 20px;
					.flow-title {
						font-weight: 600;
					}
					.flow-form {
						display: flex;
						flex-wrap: wrap;
					}
				}
			}
			.container-rule {
				width: 100%;
				margin-top: 20px;
				border-bottom: 1px dashed #ccc;
				.rule-title {
					font-size: 16px;
					font-weight: 600;
				}
				.rule-form {
					display: flex;
					flex-wrap: wrap;
				}
				.rule-format {
					padding: 20px 20px 10px 36px;
					border-radius: 6px;
					background-color: #eee;
					margin-bottom: 20px;
					.format-title {
						font-weight: 600;
					}
					.format-form {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
					}
				}
			}
			.container-time {
				width: 100%;
				margin-top: 20px;
				// border-bottom: 1px dashed #ccc;
				.time-title {
					font-weight: 600;
					font-size: 16px;
				}
				.time-form {
					display: flex;
					flex-wrap: wrap;
					padding: 20px 20px 10px 36px;
					border-radius: 6px;
					background-color: #eee;
				}
			}
		}
		.rule-detail-resource-title {
			color: #999;
			width: 100px;
		}
		.rule-detail-resource-value {
			text-align: left;
			color: #333;
			font-weight: 600;
			width: 300px;
		}
		.rule-detail-flow-title {
			color: #999;
			width: 100px;
		}
		.rule-detail-flow-value {
			text-align: left;
			color: #333;
			font-weight: 600;
			width: 90%;
		}
		.rule-detail-rule-title {
			color: #999;
			width: 100px;
		}
		.rule-detail-rule-value {
			text-align: left;
			color: #333;
			font-weight: 600;
			width: 80%;
		}
		.rule-detail-format-title {
			color: #999;
			width: 100px;
		}
		.rule-detail-format-value {
			text-align: left;
			color: #333;
			font-weight: 600;
			width: 70%;
		}
		.rule-detail-format-value-line {
			text-align: left;
			color: #333;
			font-weight: 600;
			width: 500px;
		}
		.rule-detail-rule-value-middle {
			text-align: left;
			color: #333;
			font-weight: 600;
			width: 100px;
		}
		.rule-detail-rule-value-right {
			text-align: left;
			color: #333;
			font-weight: 600;
			width: 60%;
		}
		.rule-detail-time-title {
			color: #999;
			width: 100px;
		}
		.rule-detail-time-value {
			text-align: left;
			color: #333;
			font-weight: 600;
			width: 30%;
		}
		// p
		p {
			padding-bottom: 10px;
		}
	}
</style>
